<template>
  <div class="editTemplate">
    <a-modal
      @cancel="hideTmeplateTitle"
      :destroyOnClose="true"
      :visible="editTemplateVisible"
      :maskClosable="false"
      title="保存模板"
      :footer="null"
    >
      <a-form :model="svgComponentsLists">
        <a-form-item
          label="模板标题"
          name="templateName"
          :rules="[{ required: true, message: '请输入模板标题!' }]"
        >
          <a-input
            v-model:value="svgComponentsLists.templateName"
            placeholder="请输入模板标题"
          />
        </a-form-item>
        <a-form-item
          :labelCol="{span:4}"
          label="模板备注"
          name="remark"
        >
          <a-textarea
            width="300px"
            v-model:value="svgComponentsLists.remark"
            placeholder="请输入模板备注"
            :autoSize="{ minRows: 2, maxRows: 6 }"
          />
        </a-form-item>
        <div class="button">
          <div>
            <a-form-item
              ><a-button type="default" @click="hideTmeplateTitle"
                >取消</a-button
              ></a-form-item
            >
          </div>
          <div>
            <a-form-item>
              <a-button
                type="primary"
                html-type="submit"
                @click="confrimTemplateTitle"
                >确定</a-button
              >
            </a-form-item>
          </div>
        </div>
      </a-form>
    </a-modal>
  </div>
</template>
<script>
export default {
  props: ['editTemplateVisible','svgComponents'],
  computed:{
    svgComponentsLists(){
      return this.svgComponents
    }
  },
  methods: {
    confrimTemplateTitle() {
      if (this.svgComponentsLists.templateName) {
        this.$emit('confrimTemplateTitle');
        this.hideTmeplateTitle();
      }
    },
    hideTmeplateTitle() {
      this.$emit('hideTmeplateTitle');
    },
  },
};
</script>
<style scoped>
.ant-upload-select-picture-card i {
  font-size: 32px;
  color: #999;
}

.ant-upload-select-picture-card .ant-upload-text {
  margin-top: 8px;
  color: #666;
}
.button {
  display: flex;
}
.button > div {
  text-align: center;
  flex: 1;
}
.button .ant-row {
  display: inline !important;
  flex-flow: row wrap !important;
}
</style>
